<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li {
            list-style: none;
            width: 370px;
            height: 120px;
            background-color: #f99;
            border: 20px solid #000;
        }
        
        li:nth-child(1) {
            border-image-source: url(images/border.jpg);
            border-image-slice: 167 167;
            border-image-repeat: repeat;
        }
        
        li:nth-child(2) {
            border-image-source: url(images/border.jpg);
            border-image-slice: 167 167;
            border-image-repeat: round;
        }
        
        li:nth-child(3) {
            border-image-source: url(images/border.jpg);
            border-image-slice: 167 167;
            border-image-repeat: stretch;
        }
        /* borer-image-repeat repeat round stretch */
        /* border-image-width边框图片宽度 */
    </style>
</head>

<body>

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>


</body>

</html>